<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程订单列表</title>
    <link rel="shortcut icon" href="../public/img/icon.png">
</head>
    <link rel="stylesheet" href="/lay-excel/layui/src/css/layui.css">
    <script src="/lay-excel/layui/src/layui.js"></script>

<style>
    .OpeHome_1{
        background-color:#F3F3F3;
    }
    .OpeHome_1 span{
        line-height:40px;
        margin-left: 10px;
        font-weight:bolder;
    }
    .OpeHome_1 button{
        margin-top: 5px;
        margin-bottom: 5px;
        height: 30px;
        width: 75px;
        line-height: 30px;
        font-size: 10px;
    }
    .OpeHome_1 button .refresh{
        font-size: 12px;
    }
    .OpeHome_1 button:hover {
        border-color: #1ABC9C;
        color: #1ABC9C;
    }
    .OpeHome_1 button i:hover {
        color: #1ABC9C;
    }
    /*
    检索
    */
    .div_index{
        margin-right:20px;
        width:1223px;
        height:130px;
        margin-bottom:10px;
        border-left:1px solid #E6E6E6;
        border-right:1px solid #E6E6E6;
        border-bottom:1px solid #E6E6E6;
    }
    .div_index_title{
        width:100%;
        height:55px;
        background-color:#F3F3F3;
        border-bottom:1px solid #E6E6E6;
        font-weight:bold;
        line-height:55px;
        font-size:16px;
        text-indent:18px;
        color:#666666;
    }
    .index_btns1{
        width:90px;
        height:26px;
        margin-left:990px;
    }
    .div_index_input{
        width:100%;
        height:72px;
        background-color:#FFFFFF;
    }
    .index_li_item{
        margin-top:18px;
        width:300px;
        float:left;
    }
    #indexBtn{
        margin-left:60px;
        width:100px;
    }
</style>
<body>
<!--列表名-->
<div class="layui-card ">
    <!--头部-->
    <div class="layui-row" >
        <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 layui-col-lg10 OpeHome_1">
            <span id="span_1">课程订单</span>
        </div>
        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-col-lg1 OpeHome_1">
            <button type="button" class="layui-btn layui-btn-primary button_1" id="refreshs">
                <i class="layui-icon layui-icon-refresh refresh"></i>刷新
            </button>
        </div>
        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-col-lg1 OpeHome_1">
            <button type="button" class="layui-btn layui-btn-primary button_1" id="back">
                <i class="layui-icon layui-icon-left refresh"></i>返回
            </button>
        </div>
    </div>
    <input type="hidden" name="orderStatus" id="orderStatus"><!--编号-->
    <button type="button" class="layui-btn"  id="allOrders">
        全部订单(<span class="toAudit" id="value1" ></span>)
    </button>
    <button type="button" class="layui-btn layui-btn-primary" id="payment">
        待付款(<span class="toAudit" id="value2"></span>)
    </button>
    <button type="button" class="layui-btn layui-btn-primary" id="completed">
        已完成(<span class="toAudit" id="value3"></span>)
    </button>
    <button type="button" class="layui-btn layui-btn-primary" id="cancell">
        已取消(<span class="toAudit" id="value4"></span>)
    </button>
</div>


<!-- 头部结束 -->
<!-- 检索 -->
<div class="div_index">
    <div class="div_index_title">
        <i class="layui-icon layui-icon-search"></i>
        筛选查询
        <button type="button" class="layui-btn layui-btn-xs index_btns1" id="index_btn1">
            <i class="layui-icon layui-icon-survey layui-font-9"></i>高级检索
        </button>
        <input type="hidden" id="vil" > <!--时间-->
        <input type="hidden" id="vil1" > <!--账号-->
        <input type="hidden" id="vil2" > <!--支付-->
        <input type="hidden" id="vil3" > <!--来源-->
        <input type="hidden" id="vil4" > <!--编号-->
    </div>
    <div class="div_index_input">
        <form class="layui-form" id="selIndex">
            <ul class="div_index_ul">
                <li class="index_li_item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">订单编号:</label>
                        <div class="layui-input-block">
                            <input type="text" id="orderNo" name="orderNo" placeholder="订单编号" class="layui-input">
                        </div>
                    </div>
                </li>
                <li class="index_li_item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户账号:</label>
                        <div class="layui-input-block">
                            <input type="text" id="account" name="account" placeholder="用户账号" class="layui-input">
                        </div>
                    </div>
                </li>
                <li class="index_li_item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付方式:</label>
                        <div class="layui-input-block">
                            <select id="orderPaymentChannel" name="orderPaymentChannel" placeholder="支付方式" class="layui-input">
                                <option value="">选择支付方式</option>
                                <option value="2">微信支付</option>
                                <option value="3">余额支付</option>
                                <option value="4">未支付</option>
                                <option value="5">支付宝支付</option>

                            </select>
                        </div>
                    </div>
                </li>
                <li class="index_li_item">
                    <button type="button" class="layui-btn" id="indexBtn">
                        <i class="layui-icon layui-icon-search layui-font-9"></i>
                        搜索
                    </button>
                </li>
            </ul>
        </form>
    </div>
</div>

<div>
    <!--table开始-->
    <div class="layui-row OpeHome_div tab1" >
        <div class="layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8" id="div">
            <i class="layui-icon icon" >&#xe62d;</i>
            <span id="OpeHome_span1">课程订单列表</span>
        </div>
        <div class="layui-col-md9 layui-col-xs9 layui-col-sm9 layui-col-lg9">
            <table class="div_tab" id="tab_id"></table>
        </div>
    </div>
</div>


<script>
    var layer;
    var $;
    layui.use(['layedit','laydate','layer','util','table'], function() {
        $ = layui.$;
        layer = layui.layer,
            util = layui.util;
        var laydate = layui.laydate;
        var table = layui.table

        //获取课程订单状态记录
        getNumber(0,2,3,10);
        function getNumber(result1,result2,result3,result4){
            $.ajax({
                url:"/OpeHomes/getNumber",//后台路径
                type:"post",
                dataType:"json",
                data:{"result1":result1,"result2":result2,"result3":result3,"result4":result4},
                success:function(data){
                    $("#value1").html(data.allNumber);
                    $("#value2").html(data.payNumber);
                    $("#value3").html(data.completeNumber);
                    $("#value4").html(data.cancelNumber);
                }
            })
        }

        //高级检索
        $("#index_btn1").on('click',function() {
            layer.open({
                type:2,
                title:"高级检索",
                area:['646px','440px'],
                shade:0,
                content:"/operation/Course_order_list_retrieval.html",
                offset:"auto",
                success:function(layero,index){
                }
            })
        })
        retrieve=function(){
            var v =  $("#vil").val();
            var v2 =  $("#vil1").val();
            var v3 = $("#vil2").val();
            var v4 =  $("#vil3").val();
            var v5 =  $("#vil4").val();
            var orderType=2;
            var orderStatus=$("#orderStatus").val();
            $.ajax({
                url:"/OpeHomes/Retrieve",
                type:"post",
                dataType:"json",
                data:{"createDate":v,"account":v2,"orderPaymentChannel":v3,"orderSource":v4,"orderNo":v5,"orderType":orderType,"orderStatus":orderStatus},
                success:function(data){
                    selTable(data.obj);
                }
            })
        }
        //查询按钮
        $("#indexBtn").on('click',function(){
            var orderNo=$("#orderNo").val();
            var account=$("#account").val();
            var orderPaymentChannel=$("#orderPaymentChannel").val();
            var orderStatus=$("#orderStatus").val();
            var orderType=2;
            obtain(orderNo,account,orderPaymentChannel,orderStatus,orderType);
        })
        function obtain(orderNo,account,orderPaymentChannel,orderStatus,orderType){
            //console.log(orderNo,account,orderPaymentChannel,orderStatus,orderType)
            $.ajax({
                url:"/OpeHomes/query",//后台路径
                type:"post",
                dataType:"json",
                data:{"orderNo":orderNo,"account":account,"orderPaymentChannel":orderPaymentChannel,"orderStatus":orderStatus,"orderType":orderType},
                success:function(data){
                    selTable(data.obj);
                }
            })
        }
        //全部订单 待付款 已完成  已取消
        $("#allOrders").on('click',function(){
            $("#payment").addClass("layui-btn-primary");
            $("#completed").addClass("layui-btn-primary");
            $("#cancell").addClass("layui-btn-primary");
            $("#allOrders").removeClass("layui-btn-primary");
            $("input[name=orderStatus]").val();
            SelTab(0,2)
        })
        $("#payment").on('click',function(){
            $("#allOrders").addClass("layui-btn-primary");
            $("#completed").addClass("layui-btn-primary");
            $("#cancell").addClass("layui-btn-primary");
            $("#payment").removeClass("layui-btn-primary");
            $("input[name=orderStatus]").val(2);
            SelTab(2,2);
        })
        $("#completed").on('click',function(){
            $("#allOrders").addClass("layui-btn-primary");
            $("#payment").addClass("layui-btn-primary");
            $("#cancell").addClass("layui-btn-primary");
            $("#completed").removeClass("layui-btn-primary");
            $("input[name=orderStatus]").val(3);
            SelTab(3,2);
        })
        $("#cancell").on('click',function(){
            $("#allOrders").addClass("layui-btn-primary");
            $("#payment").addClass("layui-btn-primary");
            $("#completed").addClass("layui-btn-primary");
            $("#cancell").removeClass("layui-btn-primary");
            $("input[name=orderStatus]").val(10);
            SelTab(10,2);
        })
        //订单状态列表
        function SelTab(orderStatus,orderType){
            $.ajax({
                url:"/OpeHomes/COStatus",//后台路径
                type:"post",
                dataType:"json",
                data:{"orderStatus":orderStatus,"orderType":orderType},
                success:function(data){
                    seltab(data.obj);//全部订单
                    console.log(data)
                }
            })
        }

        function selTable(data){
            //设备分页table
            table.render({
                elem: "#tab_id",//容器
                data:data,
                title: "数据列表",
                limit: 10,//分页显示条数
                width: 1223,
                page: true,
                toolbar: true,
                cols: [[//定义列
                    {type: 'checkbox', fixed: 'left'},//复选框靠左,
                    {
                        title: "订单编号", fixed: 'left', align: 'center', width: 120, templet: function (data) {
                            return data.order_no;
                        }
                    },
                    {field: "id", hide: true},

                    {field: 'createDate', title: "提交时间", align: 'center', width: 155, templet: function (data) {
                            return data.create_date;
                        }
                    },
                    {
                        field: 'account', title: "用户账号", align: 'center', width: 132, templet: function (data) {
                            return  data.account;
                        }
                    },
                    {field: 'logistics_fee', title: '订单金额', align: 'center', width: 120, templet: function (data) {
                            return "<span>￥</span> "+data.logistics_fee;
                        }
                    },
                    {
                        field: 'orderPaymentChannel', title: '支付方式', align: 'center', width: 120, templet: function (data) {
                            if (data.orderPaymentChannel == 2) {
                                return "微信"
                            } else if(data.orderPaymentChannel == 3){
                                return "余额"
                            }else if(data.orderPaymentChannel == 5){
                                return "支付宝"
                            }else {
                                return "未支付"
                            }
                        }
                    },
                    {
                        field: 'orderSource', title: '订单来源', align: 'center', width: 120, templet: function (data) {
                            if (data.orderSource == 2) {
                                return "小程序"
                            } else {
                                return "APP"
                            }
                        }
                    },
                    {
                        field: 'order_status', title: '订单状态', align: 'center', width: 125, templet: function (data) {
                            if (data.order_status == 2) {
                                return "未付款"
                            } else if (data.order_status == 3) {
                                return "已付款"
                            }else if (data.order_status == 6) {
                                return "已签收"
                            }else if (data.order_status == 10) {
                                return "取消交易"
                            }
                        }
                    },
                    {
                        field: 'orderType', title: '商品类型', align: 'center', width: 120, templet: function (data) {
                            if (data.order_type == 2) {
                                return "视频"
                            }
                        }
                    },
                    {
                        field: "", title: "操作", align: 'center', width: 152, templet: function (data) {
                            return "<a  style='color:#1ABC9C' onclick='seloul(\""+data.order_id+"\")'>查看订单</a>  ";
                        }
                    }
                ]]
            })

        }
        selTab(2)
        function selTab(orderType){
            $.ajax({
                url:"/OpeHomes/status",//后台路径
                type:"post",
                dataType:"json",
                data:{"orderType":orderType},
                success:function(data){
                    seltab(data.obj);//全部课程订单

                }
            })
        }

        function seltab(data){
            //设备分页table
            table.render({
                elem: "#tab_id",//容器
                data:data,
                title: "数据列表",
                limit: 10,//分页显示条数
                width: 1223,
                page: true,
                toolbar: true,
                cols: [[//定义列
                    {type: 'checkbox', fixed: 'left'},//复选框靠左,
                    {
                        title: "订单编号", fixed: 'left', align: 'center', width: 120, templet: function (data) {
                            return data.order_no;
                        }
                    },
                    {field: "id", hide: true},

                    {field: 'createDate', title: "提交时间", align: 'center', width: 155, templet: function (data) {
                        return data.create_date;
                        }
                     },
                    {
                        field: 'account', title: "用户账号", align: 'center', width: 132, templet: function (data) {
                            return  data.account;
                        }
                    },
                    {field: 'logistics_fee', title: '订单金额', align: 'center', width: 120,templet: function (data) {
                            return "<span>￥</span> "+data.logistics_fee;
                        }
                    },
                    {
                        field: 'orderPaymentChannel', title: '支付方式', align: 'center', width: 120, templet: function (data) {
                            if (data.orderPaymentChannel == 2) {
                                return "微信"
                            } else if(data.orderPaymentChannel == 3){
                                return "余额"
                            }else if(data.orderPaymentChannel == 5){
                                return "支付宝"
                            }else {
                                return "未支付"
                            }
                        }
                    },
                    {
                        field: 'orderSource', title: '订单来源', align: 'center', width: 120, templet: function (data) {
                            if (data.orderSource == 2) {
                                return "小程序"
                            } else {
                                return "APP"
                            }
                        }
                    },
                    {
                        field: 'order_status', title: '订单状态', align: 'center', width: 125, templet: function (data) {
                            if (data.order_status == 2) {
                                return "未付款"
                            } else if (data.order_status == 3) {
                                return "已付款"
                            }else if (data.order_status == 6) {
                                return "已签收"
                            }else if (data.order_status == 10) {
                                return "取消交易"
                            }
                        }
                    },
                    {
                        field: 'orderType', title: '商品类型', align: 'center', width: 120, templet: function (data) {
                            if (data.order_type == 2) {
                                return "视频"
                            }
                        }
                    },
                    {
                        field: "", title: "操作", align: 'center', width: 152, templet: function (data) {
                            return "<a style='color:#1ABC9C' onclick='seloul(\""+data.order_id+"\")'>查看订单</a>";
                        }
                    }
                ]]
            })
        }
    })
    //查看订单
    function seloul(order_id) {
        var $;
        var layer;
        var element;
        layui.use(['element','layer','jquery'], function() {
            $ = layui.jquery;
            element = layui.element;
            layer = layui.layer;
            //商品分类分类
            $.ajax({
                url: "/OpeHomes/selOul",
                type: "post",
                dataType: "json",
                data: {"id": order_id},
                success: function (dat) {
                    var order_payment_channel=dat.obj.orderPaymentChannel;
                    if(order_payment_channel==2){
                        order_payment_channel="微信支付";
                    }else  if(order_payment_channel==3){
                        order_payment_channel="余额支付";
                    }
                    var order_type=dat.obj.order_type;
                    if(order_type==2){
                        order_type="视频";
                    }else  if(order_type==3){
                        order_type="商品";
                    }
                    var order_source=dat.obj.order_source;
                    if(order_source==2){
                        order_source="小程序";
                    }else  if(order_source==3){
                        order_source="app";
                    }
                    localStorage.setItem("order_no",dat.obj.order_no);
                    localStorage.setItem("order_payment_channel",order_payment_channel);
                    localStorage.setItem("account",dat.obj.account);
                    localStorage.setItem("main_image",dat.obj.main_image);
                    localStorage.setItem("order_logistics_number",dat.obj.order_logistics_number);
                    localStorage.setItem("order_souce",order_source);
                    localStorage.setItem("order_type",order_type);
                    localStorage.setItem("product_code",dat.obj.product_code);
                    localStorage.setItem("product_count",dat.obj.product_count);
                    localStorage.setItem("categroy_name",dat.obj.categroy_name);
                    localStorage.setItem("coupon_price",dat.obj.coupon_price);
                    localStorage.setItem("price_total",dat.obj.price_total);
                    localStorage.setItem("product_name",dat.obj.product_name);
                    localStorage.setItem("logistics_fee",dat.obj.logistics_fee);
                    localStorage.setItem("currentprice_product",dat.obj.currentprice_product);
                    window.location.href='Course_Order_Details.html';

                }
            })
        })
    }
</script>
</body>
</html>